<template>
  <view class="" :class="ggclass">
    <view class="select-item" @click.capture="spread">
      <!-- :style="{ padding: `0 ${padd}rpx`, width, height }" -->
      <view class="item" v-if="params.name">
        <slot></slot><text>{{ params.name }}</text>
        <text
          class="iconfont icon-xiajiantou mg_l10"
          :style="{ transform: `rotate(${num}deg)`, transition: '0.5s' }"
        >
        </text>
      </view>
      <view class="item" v-else>
        <slot></slot><text class="grey">{{ hint }}</text>
        <text
          class="iconfont icon-xiajiantou mg_l10"
          :style="{ transform: `rotate(${num}deg)`, transition: '0.5s' }"
        >
        </text>
      </view>
    </view>
    <uni-popup
      ref="popRef"
      :round="50"
      @close="close"
      :safe-area="false"
      @change="changePop"
    >
      <view class="picker-view-box" :style="{background:backgrounds}">
        <view class="picker-title">
          <text class="" @click="close">取消</text>
          <view class="font_s32 font-weight">{{ title }}</view>
          <text class="blue" @click="submit">确定 </text>
        </view>
        <picker-view
          v-if="visible"
          :indicator-style="indicatorStyle"
          :value="values"
          @change="bindChange"
          class="picker-view"
        >
          <picker-view-column>
            <view class="item" v-for="(item, index) in list" :key="index">{{
              item.name
            }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup lang="ts">
import {
  computed,
  defineProps,
  reactive,
  toRefs,
  inject,
  ref,
  defineEmits,
  getCurrentInstance,
} from "vue";
const emit = defineEmits(["change", "update:modelValue", "update:name"]);
const { proxy } = getCurrentInstance() as any;
const date = new Date();
const Cinput = inject("Cinput") as any;
type listType = { [key: string]: any };
interface propsType {
  ggclass: string;
  title: string;
  disabled: boolean;
  modelValue: string | number;
  range_key: string;
  range_value: string;
  immediate: boolean;
  hint: string;
  list: Array<listType>;
}
const props: propsType = defineProps({
  ggclass: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "自定义",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  modelValue: {
    type: [Number, String],
    default: "",
  },
  range_key: {
    type: String,
    default: "name",
  },
  range_value: {
    type: String,
    default: "id",
  },
  immediate: {
    type: Boolean,
    default: false,
  },
  hint: {
    type: String,
    default: "请选择",
  },
  list: {
    type: Array<listType>,
    default: () => [],
  },
});
type paramsType = {
  name?: string;
  id?: string;
};
interface stateType {
  values: any[];
  visible: boolean;
  indicatorStyle: string;
  params: paramsType;
  slideParams: paramsType;
  num: number;
}
const state: stateType = reactive({
  values: [],
  visible: false,
  indicatorStyle: `height: 50px;`,
  params: {},
  slideParams: {},
  num: 0,
});

const { values, visible, indicatorStyle, params, slideParams, num } =toRefs(state);
const val = computed(() => {
  return props.modelValue;
});

const changePop = (e: any) => {
  if (e.show) {
    state.num = 180;
  } else {
    state.num = 0;
  }
};
const popRef = ref();
const spread = () => {
  if (props.disabled) return;
  popRef.value.open("bottom");
  state.visible = true;
  setValues();
};
const show = () => {
  state.visible = true;
  popRef.value.open("bottom");
  setValues();
};
const close = () => {
  popRef.value.close();
  state.visible = false;
};
const setValues = () => {
  let index = props.list.findIndex((v) => v[props.range_value] === val.value);
  state.values = [index >= 0 ? index : 0];
  bindChange({ detail: { value: state.values } });
};
const bindChange = (e: any) => {
  const val = e.detail.value;
  state.slideParams.name = props.list[val][props.range_key];
  state.slideParams.id = props.list[val][props.range_value];
};
const backgrounds = computed(() => {
  return proxy.$color.theme.pageBgColor;
})
const submit = () => {
  close();
  uni.showLoading();
  state.params = { ...state.slideParams };
  let time = setTimeout(() => {
    emit("change", state.params);
    emit("update:modelValue", state.params.id);
    emit("update:name", state.params.name);
    uni.hideLoading();
    clearTimeout(time);
    proxy.$nextTick(() => {
      typeof Cinput.verify === "function" && Cinput.verify();
    });
  }, 1000);
};
</script>
<style lang="scss" scoped>
.picker-view-box {
  position: relative;
  z-index: 1000;
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
}

.picker-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
}

.picker-view {
  width: 750rpx;
  height: 500rpx;
  // margin-top: 20rpx;
}

.item {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.select-item {
  // height: 70rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10rpx;
}

.icon-xiajiantou {
  display: inline-block;
  color:#ccc;
}
</style>
